<template>
  <div id="pictureDetailPage">
    <a-row :gutter="[16, 16]" style="display: flex; justify-content: center">
      <!-- 图片预览 -->
      <a-col :sm="24" :md="16" :xl="18" style="flex: 0 0 auto; max-width: 100%">
        <a-card title="图片预览">
          <a-image :src="picture?.url" style="max-height: 600px; object-fit: contain" />
        </a-card>
      </a-col>
      <!-- 图片信息区域 -->
      <a-col :sm="24" :md="8" :xl="6">
        <a-card title="图片信息">
          <a-descriptions :column="1" v-if="picture">
            <a-descriptions-item label="作者">
              <a-space>
                <a-avatar :size="24" :src="picture.user?.userAvatar" />
                <div>{{ picture.user?.userName }}</div>
              </a-space>
            </a-descriptions-item>
            <a-descriptions-item label="名称">
              {{ picture.name ?? '未命名' }}
            </a-descriptions-item>
            <a-descriptions-item label="简介">
              {{ picture.introduction ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="分类">
              {{ picture.category ?? '默认' }}
            </a-descriptions-item>
            <a-descriptions-item label="标签">
              <a-tag v-for="tag in picture.tags" :key="tag">
                {{ tag }}
              </a-tag>
            </a-descriptions-item>
            <a-descriptions-item label="格式">
              {{ picture.picFormat ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽度">
              {{ picture.picWidth ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="高度">
              {{ picture.picHeight ?? '-' }}
            </a-descriptions-item>
            <a-descriptions-item label="宽高比">
              {{ picture?.picScale ?? '-' }}
            </a-descriptions-item>
          </a-descriptions>
          <!--  图片操作按钮 -->
          <a-space v-if="picture" wrap>
            <a-button v-if="canEdit" :icon="h(DeleteOutlined)" danger @click="doDelete(picture?.id)"
              >删除</a-button
            >
            <!-- 直接复用添加图片的编辑页面。 -->
            <a-button
              v-if="canEdit"
              :icon="h(EditOutlined)"
              :href="`/add_picture?id=${picture.id}`"
              type="default"
            >
              编辑
            </a-button>
            <a-button type="primary" @click="doDownload">
              点击下载
              <template #icon>
                <DownloadOutlined />
              </template>
            </a-button>
          </a-space>
        </a-card>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, ref, h, computed } from 'vue'
import { deletePictureByIdUsingPost, getPictureVoByIdUsingGet } from '@/api/pictureController.ts'
import { message } from 'ant-design-vue'
import { EditOutlined, DeleteOutlined, DownloadOutlined } from '@ant-design/icons-vue'
import { useLoginUserStore } from '@/stores/useLoginUserStore.ts'
import router from '@/router'
import { onBeforeRouteUpdate, useRoute } from 'vue-router'


interface Props {
  id: string | number
}

//根据id获取图片详情
const props = defineProps<Props>()
const picture = ref<API.PictureVO>()
const fetchPictureDetail = async () => {
  try {
    console.log('props.id=', props.id)
    const res = await getPictureVoByIdUsingGet({
      id: props.id,
    })
    if (res.data.code === 0 && res.data.data) {
      picture.value = res.data.data
    } else {
      message.error('获取图片详情失败：' + res.data.message)
    }
  } catch (error) {
    message.error('获取图片详情失败：' + error.data.message)
  }
}

//删除函数
const doDelete = async () => {
  const id = picture.value?.id
  const res = await deletePictureByIdUsingPost({ id })
  if (id === undefined || id === null) {
    message.error('删除失败：id为空')
    return
  }
  if (res.data.code === 0) {
    message.success('删除成功')
    router.replace({
      path: previousRoute.value ?? '/',
    })
  } else {
    message.error('删除失败：' + res.data.message)
  }
}

//判断是否具有编辑权限
const canEdit = computed(() => {
  const loginUserStore = useLoginUserStore()
  //未登录不可编辑
  if (!loginUserStore.loginUser.id) {
    return false
  }
  //仅本人获取管理员可以编辑
  const user = picture.value?.user
  return loginUserStore.loginUser.id === user?.id || loginUserStore.loginUser.userRole === 'admin'
})
const route = useRoute()
const previousRoute = ref<string | null>()
onMounted(() => {
  previousRoute.value = route.query.previousRoute as string | null
  fetchPictureDetail()
})
// 监听路由变化时重新获取数据
onBeforeRouteUpdate(async (to) => {
  const newId = to.params.id as string | number
  if (newId !== props.id) {
    props.id = newId
    fetchPictureDetail()
  }
})

import { downloadImage } from '@/utils'

// 下载图片
const doDownload = () => {
   downloadImage(picture.value?.url, picture.value?.name)
}
</script>

<style scoped></style>
